<template>
  <!-- v-if解决价格出现undefined的问题 -->
  <view v-if="goods" class="goods-detail">
    <u-swiper
     @click="currentFn"
      :list="goods.pics"
      keyName="pics_big"
      indicator
      indicatorMode="line"
      circular
      height="750rpx"
    ></u-swiper>
    <view class="goods-info">
      <view class="goods-price">￥{{goods.goods_price}}</view>
      <view class="goods-name u-line-2">{{goods.goods_name}}</view>
    </view>
    <view class="goods-introduce">
      <view class="goods-introduce-title">图文详情</view>
      <view class="goods-introduce-content">
        <rich-text :nodes="goods.goods_introduce"></rich-text>
      </view>
    </view>
    <!-- 购物车栏 -->
    <view class="navigation">
      <view class="left">
        <view class="item item2">
          <u-icon
            name="server-fill"
            :size="35"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text itemKefu u-line-1">客服</view>
        </view>
        <navigator 
          class="item car"
          url="/pages/cart/cart"
          open-type="switchTab"
        >
          <view style="display:inline-block;position:absolute;right:0;top:0;">
            <u-badge 
            type="error" 
            :value="cartNum" 
            ></u-badge>
          </view>
          <!-- <u-badge
            class="car-num"
            :count="9"
            type="error"
            :offset="[-3, -6]"
          ></u-badge> -->
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="onAddCart">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
    <!-- 购物车栏 -->
  </view>
</template>

<script>
export default {
  data () {
    return {
      goods:null
    }
  },
  async onLoad({goods_id}){
    console.log(this.$store)
    console.log(goods_id)
    goods_id = goods_id || 26948
    const res = await uni.$u.http.get('/goods/detail', {params: {goods_id}})
    console.log(res)
    this.goods = res.message
  },
  computed:{
    cartNum(){
      let sum=0
      this.$store.state.cartList.forEach(item=>{
        sum+=item.nums
      })
      return sum
    }
  },
  methods: {
    currentFn(index){
      // 返回图片链接
      const urls = this.goods.pics.map(v=>v.pics_big)
      console.log(index)
      let current = this.goods.pics[index].pics_big
      // 点击轮播图图片,小程序最大图片放大功能
      wx.previewImage({urls,current})
    },
    onAddCart(){
      console.log("this.onAddCart")
      const cartList = this.$store.state.cartList
      let index = cartList.findIndex(goods=>goods.goods_id === this.goods.goods_id)
      if(index===-1){
        cartList.push({...this.goods, checked: true, nums: 1})
      }else{
        cartList[index].nums++
      }
      // 调用vuex中的mutations属性的函数修改vuex数据
      this.$store.commit('setCartList', cartList)
    }
  }
}
</script>

<style lang="scss">
.goods-detail{
  padding-bottom: 102rpx;
  .goods-info{
    .goods-price{
      font-size: 28rpx;
      color: #eb4450;
      margin: 0 12rpx;
    }
    .goods-name{
      font-size: 28rpx;
      color: #666;
      margin: 0 4rpx;
    }
  }
  .goods-introduce{
    .goods-introduce-title{
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
    }
    .goods-introduce-content{}
  }
}
.navigation {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  .left {
    display: flex;
    font-size: 20rpx;
    .item2{
      margin-top: 10rpx !important;
    }
    .item {
      margin: 0 30rpx;
      // background-color: red;
      text-align: center;
      .itemKefu{
        margin-right: 5rpx;
      }
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }
    .cart {
      background-color: #ed3f14;
      margin-right: 30rpx;
    }
    .buy {
      background-color: #ff7900;
    }
  }
}
</style>